import React, {PureComponent} from 'react';
import NavigationFactory from '../../utils/navigationFactory';

import {observer, inject} from 'mobx-react';
import {Text, View, Button, Image, TextInput, StyleSheet} from 'react-native';
import Search from '../hotSearchPage/search/search';
import pixelUtil from '../../utils/pixelUtil';
import MyTabBar from '../../components/MyTabBar/MyTabBar';
import AppConfig from '../../config/appConfig';
import Recommend from '../../components/recommend/Recommend';

import TabItem from '../views/TabItem';

import TabNavigator from 'react-native-tab-navigator';

import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs';

const Tab = createMaterialTopTabNavigator();

import {getHomeItemData,getTaoBaoConfig} from "../../mode/homeCtr";

function HomeScreen() {
    return (
        <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
            <Text>Home!</Text>
        </View>
    );
}

function SettingsScreen() {
    return (
        <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
            <Text>Settings!</Text>
        </View>
    );
}

@NavigationFactory
class HomePage extends PureComponent {
  constructor(props) {
    super(props);
      this.state={
          searchScrollviewHeight:0,
          searchData:[],
          current:0,
          selectedTab:"home",
          data:[
              { title: '今日推荐'  ,index:0,cat_id:0,api:3,list:[],curPage:1},//定向计划商品API
              { title: '精选好货' ,index:1,cat_id:1,api:5,list:[],curPage:1},//高佣专场商品
              // { title: '大额神券' ,index:2,cat_id:2,api:1,list:[],curPage:1},
              { title: '大额神券'  ,index:2,cat_id:100,api:6,list:[],curPage:1},
              { title: '千元皇卷'  ,index:3,cat_id:1000,api:6,list:[],curPage:1},
              { title: '低邮精选'  ,index:4,cat_id:1,api:4,list:[],curPage:1},//精选低价包邮专区
              { title: '3.9包邮'  ,index:5,cat_id:4,api:4,list:[],curPage:1},
              { title: '6.9包邮' ,index:6,cat_id:3,api:4,list:[],curPage:1},
              { title: '9.9包邮'  ,index:7,cat_id:2,api:4,list:[],curPage:1},
              { title: '时尚女装'  ,index:8,cat_id:4,api:1,list:[],curPage:1},
              { title: '潮流男装'  ,index:9,cat_id:5,api:1,list:[],curPage:1},
              { title: '精致潮鞋' ,index:10,cat_id:6,api:1,list:[],curPage:1},
          ]
      }

  }

  componentDidMount() {

  }

  componentWillUnmount() {}

  onClickSecond = (value, title) => {
      const  item = this.state.titleList[value]
      console.log(item)
  }

    ToLowerEvent = () => {

    }

    handleClick(value){
        this.setState({
            current:value,
        },()=>{
            if (this.state.data[value].list.length > 0)return;
            getHomeItemData(this.state.data[value]).then(res=>{
                var temp = this.state.data
                temp[value].list = res.data
                temp[value].curPage = res.pageIndex
                this.setState({
                    data:temp
                })
            })
        })
    }

    rea(){
      return <View/>

    }

  render() {
    const {AppStore} = this.props;
    const navigation = this.props.navigation;
    return (
      <View style={{marginTop: 10}}>
        {/*<Search*/}
          {/*onClick={() => {*/}
            {/*navigation.navigate('hotSearchPage');*/}
          {/*}}*/}
        {/*/>*/}
          <TabNavigator>
              <TabNavigator.Item
                  selected={this.state.selectedTab === 'home'}
                  title="Home"
                //  renderIcon={() => <Image source={...} />}
                 // renderSelectedIcon={() => <Image source={...} />}
                  badgeText="1"
                  onPress={() => this.setState({ selectedTab: 'home' })}>
                  {HomeScreen}
              </TabNavigator.Item>
              <TabNavigator.Item
                  selected={this.state.selectedTab === 'profile'}
                  title="Profile"
                 // renderIcon={() => <Image source={...} />}
                  //renderSelectedIcon={() => <Image source={...} />}
                  renderBadge={() => <CustomBadgeView />}
                  onPress={() => this.setState({ selectedTab: 'profile' })}>
                  {HomeScreen}
              </TabNavigator.Item>
          </TabNavigator>
      </View>
    );
  }
}

const styles = StyleSheet.create({});

export default HomePage;
